<template>
  <div class="loserBox">
    <div class="left">
      <img src="@/assets/img/union.webp" class="img" />
    </div>
    <div class="right">
      <div class="child-infos">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item label="失踪类型" prop="l_type">
            <el-input v-model="ruleForm.l_type" placeholder="请输入失踪类型" />
          </el-form-item>

          <el-form-item label="失踪人姓名" prop="l_name">
            <el-input
              v-model="ruleForm.l_name"
              placeholder="请输入失踪人姓名"
            />
          </el-form-item>

          <el-form-item label="性别" prop="l_sex">
            <el-radio-group v-model="ruleForm.l_sex">
              <el-radio label="男" />
              <el-radio label="女" />
            </el-radio-group>
          </el-form-item>

          <el-form-item label="出生日期" prop="l_birth_date">
            <el-date-picker
              v-model="ruleForm.l_birth_date"
              type="date"
              label="出生日期"
              placeholder="请选择出生日期"
            />
          </el-form-item>

          <el-form-item label="出生地址" prop="l_birth_addr">
            <el-input
              v-model="ruleForm.l_birth_addr"
              placeholder="请输入出生地址"
            />
          </el-form-item>

          <el-form-item label="失踪日期" prop="l_miss_date">
            <el-date-picker
              v-model="ruleForm.l_miss_date"
              type="date"
              label="失踪日期"
              placeholder="请选择失踪日期"
            />
          </el-form-item>

          <el-form-item label="失踪地址" prop="l_miss_addr">
            <el-input
              v-model="ruleForm.l_miss_addr"
              placeholder="请输入失踪地址"
            />
          </el-form-item>

          <el-form-item label="特征描述" prop="l_descript">
            <el-input v-model="ruleForm.l_descript" type="textarea" />
          </el-form-item>
        </el-form>
      </div>
      <Button :flag="flag">
        <template #next>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >下一步</el-button
          >
        </template>
      </Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from "element-plus";
import { ref, reactive,inject ,getCurrentInstance} from "vue";
import Button from "./button.vue";
const flag = JSON.parse(window.sessionStorage.getItem("flag") || "true");

// const instance = getCurrentInstance()
const active = inject("active", ref(1));

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<any>({
  l_name: "",
  l_type: "",
  l_birth_date: "",
  l_miss_date: "",
  l_birth_addr: "",
  l_miss_addr: "",
  l_sex: "",
  l_descript: "",
});
const rules = reactive<FormRules>({
  l_name: [
    { required: true, message: "请输入失踪人姓名", trigger: "blur" },
    { min: 3, max: 12, message: "姓名长度为3到12", trigger: "blur" },
  ],
  l_type: [
    {
      required: true,
      message: "请选择失踪类型",
      trigger: "change",
    },
  ],
  l_birth_date: [
    {
      type: "date",
      required: true,
      message: "请选择出生日期",
      trigger: "change",
    },
  ],
  l_miss_date: [
    {
      type: "date",
      required: true,
      message: "请选择失踪日期",
      trigger: "change",
    },
  ],
  l_birth_addr: [
    {
      required: true,
      message: "请选择出生地址",
      trigger: "change",
    },
  ],
  l_miss_addr: [
    {
      required: true,
      message: "请选择失踪地址",
      trigger: "change",
    },
  ],
  l_sex: [
    {
      required: true,
      message: "请选择失踪人性别",
      trigger: "change",
    },
  ],
  l_descript: [
    { required: true, message: "失踪人的特征描述", trigger: "blur" },
  ],
});
// 再未提交前 返回页面 数据不丢失
const data = window.sessionStorage.getItem('loserForm') || "{}"
const loserForms = JSON.parse(data)
Object.keys(ruleForm).forEach(key => {
  ruleForm[key] = loserForms[key] || ruleForm[key]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (!valid) return
    active.value ++
  });
  window.sessionStorage.setItem("loserForm", JSON.stringify(ruleForm));
};
</script>

<style lang="less" scoped>
.loserBox {
  display: flex;
  .left {
    width: 35%;
    .img {
      width: 100%;
      height: 100%;
      border-radius: 10px 0 0 10px;
    }
  }
  .right {
    flex: 1;
    .child-infos {
      padding: 20px;
      padding-top: 50px;
    }
  }
}
</style>
